<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>OA部门管理</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/js.cookie.js"></script>
    <script>
        $(document).ready(function () {

            // 控制按钮显示
            function controlButtons() {

                var role;
                var loginStatusText = Cookies.get('loginStatus')
                if (loginStatusText) {
                    var loginStatus
                    try {
                        loginStatus = JSON.parse(loginStatusText);
                        role = loginStatus.role
                    } catch (error) {
                        console.error("An error occurred:", error);
                    }
                }

                console.log('role ->' + role);
                if (role === 'general_manager' || role === 'admin') {
                    $('#addBtn ').show();
                } else {
                    $('#addBtn ').hide();
                }
            }

            controlButtons();

            // 查询列表
            function searchList() {
                console.log("searchList inner ")
                var name = $('#name').val();
                $.ajax({
                    url: "/api/oadepartment/list",
                    type: 'POST',
                    data: JSON.stringify({likename: name}),
                    contentType: 'application/json',
                    success: function (data) {
                        var role;
                        var loginStatusText = Cookies.get('loginStatus')
                        if (loginStatusText) {
                            var loginStatus
                            try {
                                loginStatus = JSON.parse(loginStatusText);
                                role = loginStatus.role
                            } catch (error) {
                                console.error("An error occurred:", error);
                            }
                        }
                        var html = '';

                        $.each(data.data, function (i, item) {
                            if (role === 'general_manager') {
                                html += '<tr>' +
                                    '<td>' + item.id + '</td>' +
                                    '<td>' + item.name + '</td>' +
                                    '<td>' + item.userName + '</td>' +
                                    '<td><button class="btn btn-primary btnDetail" id="btnDetail" data-id="' + item.id + '">详情</button> ' +
                                    '<button class="btn btn-success btn-edit" id="btn-edit" data-id="' + item.id + '">修改</button> ' +
                                    '<button class="btn btn-danger btn-delete" id="btn-delete" data-id="' + item.id + '">删除</button></td>' +
                                    '</tr>';
                            } else {
                                html += '<tr>' +
                                    '<td>' + item.id + '</td>' +
                                    '<td>' + item.name + '</td>' +
                                    '<td>' + item.userName + '</td>'
                                    +
                                    '<td><button class="btn btn-primary btnDetail" id="btnDetail" data-id="' + item.id + '">详情</button> ';
                            }

                        });
                        $('#list').html(html);
                    }
                });
            }

            searchList();

            // 绑定查询按钮的点击事件
            $('#listquery').click(searchList);

            // 新增部门
            $('#btn-add').click(function () {
                var department = {
                    name: $('#add-name').val(),
                    managerUserInfoId: $('#add-role').val()
                };
                $.ajax({
                    url: "/api/oadepartment/add",
                    type: 'POST',
                    data: JSON.stringify(department),
                    contentType: 'application/json',
                    success: function (res) {
                        if (res.stateCode === '200') {
                            searchList();
                            $('#addModal').modal('hide'); // 关闭模态框
                        } else {
                            // 然后显示原生的 alert
                            window.alert(res.msg);
                        }
                    }
                });
            });

            // 从后端接口获取角色数据并填充到下拉框
            function loadRoles() {
                var department = {
                    role: "manager"
                };
                $.ajax({
                    url: '/api/userInfo/list', // 替换为你的后端接口URL
                    type: 'POST',
                    data: JSON.stringify(department),
                    contentType: 'application/json',
                    success: function (response) {
                        var roles = response.data;
                        var roleSelect = $('#add-role');
                        roles.forEach(function (userinfo) {
                            roleSelect.append($('<option></option>').val(userinfo.id).html(userinfo.name));
                        });

                        var editRole = $('#editRole');
                        editRole.empty(); // 清空下拉框
                        roles.forEach(function (userinfo) {
                            editRole.append($('<option></option>').val(userinfo.id).html(userinfo.name));
                        });

                    },
                    error: function () {
                        alert('获取部门经理数据失败');
                    }
                });
            }

            // 在文档加载完成后加载角色数据
            loadRoles();

            // 绑定编辑事件
            $(document).on('click', '.btn-edit', function () {
                var id = $(this).data('id');
                $.ajax({
                    url: '/api/oadepartment/detail',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({id: id}),
                    success: function (response) {
                        var department = response.data;
                        $('#editId').val(department.id);
                        $('#editName').val(department.name);
                        $('#editRole').val(department.managerUserInfoId);
                        $('#editModal').modal('show');
                    },
                    error: function () {
                        alert('获取部门详情失败');
                    }
                });
            });

            // 绑定编辑模态框的更新事件
            $('#editBtn').click(function () {
                var department = {
                    id: $('#editId').val(),
                    name: $('#editName').val(),
                    managerUserInfoId: $('#editRole').val()
                };
                $.ajax({
                    url: '/api/oadepartment/update',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(department),
                    success: function () {
                        searchList(); // 刷新列表
                        $('#editModal').modal('hide'); // 关闭模态框
                    },
                    error: function () {
                        alert('更新部门失败');
                    }
                });
            });


            // 删除部门
            $(document).on('click', '.btn-delete', function () {
                var id = $(this).data('id');
                if (confirm("确定要删除这条记录吗？")) {
                    $.ajax({
                        url: "/api/oadepartment/delete",
                        type: 'POST',
                        data: JSON.stringify({id: id}),
                        contentType: 'application/json',
                        success: function (data) {
                            if (data.stateCode === '-1') {
                                window.alert(data.msg);
                            } else {
                                searchList();
                            }
                        }
                    });
                }
            });

            // 绑定详情事件
            $(document).on('click', '.btnDetail', function () {
                var id = $(this).data('id');
                $.ajax({
                    url: '/api/oadepartment/detail',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({id: id}),
                    success: function (response) {
                        var department = response.data;
                        // 假设详情模态框的HTML结构如下
                        $('#detailId').text(department.id);
                        $('#detailName').text(department.name);
                        $('#detailRole').text(department.userName);
                        $('#detailModal').modal('show');
                    },
                    error: function () {
                        alert('获取部门详情失败');
                    }
                });
            });


        });
    </script>
    <script>
        $(function () {
            $('#header').load('admin_header.html');
        })
    </script>
</head>
<body>
<div id="header"></div>
<div class="container">
    <h2>OA部门管理</h2>
    <input type="text" id="name" placeholder="部门名称">
    <button class="btn btn-primary" id="listquery">查询</button>
    <button class="btn btn-success btn-add" id="addBtn" data-toggle="modal" data-target="#addModal">新增</button>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>ID</th>
            <th>部门名称</th>
            <th>部门经理</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="list">
        </tbody>
    </table>
</div>

<!-- 新增部门模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                <h4 class="modal-title">新增部门</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="add-name">部门名称:</label>
                    <input type="text" class="form-control" id="add-name" placeholder="部门名称">
                </div>
                <div class="form-group">
                    <label for="add-role">部门经理:</label>
                    <select id="add-role" class="form-control">
                        <!-- 角色选项将通过AJAX动态填充 -->
                    </select>
                </div>
                <button class="btn btn-primary" id="btn-add">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改部门模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                <h4 class="modal-title">修改部门</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" class="form-control" id="editId">
                <input type="text" class="form-control" id="editName" placeholder="部门名称">
                <select id="editRole" class="form-control">
                    <!-- 角色选项将通过AJAX动态填充 -->
                </select>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="editBtn">更新</button>
            </div>
        </div>
    </div>
</div>

<!-- 部门详情模态框 -->
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                <h4 class="modal-title">部门详情</h4>
            </div>
            <div class="modal-body">
                <p><strong>ID:</strong> <span id="detailId"></span></p>
                <p><strong>部门名称:</strong> <span id="detailName"></span></p>
                <p><strong>部门经理:</strong> <span id="detailRole"></span></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
